<template>
  <!-- 滚动容器 -->
  <div class="overflow-x-hidden flex flex-row" ref="scrollerDivRef">
    <!-- 内容容器 -->
    <div class="bg-red-100 flex flex-row" ref="contentDivRef">
      <span class="text-nowrap" v-for="(item, idx) in list" :key="idx">{{ item }}</span>
    </div>
    <!-- 复制内容的容器 -->
    <div class="bg-green-100 flex flex-row">
      <span class="text-nowrap" v-for="(item, idx) in list" :key="idx">{{ item }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  /**
   * 文字内容
   */
  list: string[]
  /**
   * 轮播间隔
   */
  scrollInterval: number
}>()
const { scrollInterval } = toRefs(props)
const scrollerDivRef = ref<HTMLDivElement>()
const contentDivRef = ref<HTMLDivElement>()

onMounted(() => {
  init()
})

function doScroll() {
  const scrollerDiv = scrollerDivRef.value
  const contentDiv = contentDivRef.value
  if (!scrollerDiv || !contentDiv) return

  if (scrollerDiv.scrollLeft - contentDiv.offsetWidth <= 0) {
    // contentDiv的末尾尚未滚动到滚动容器视口的顶部，则让滚动容器继续向左滚动
    scrollerDiv.scrollLeft++
  } else {
    // contentDiv的末尾滚动到了滚动容器视口的顶部，则让滚动容器回到最顶部
    scrollerDiv.scrollLeft = 0
  }
  // 继续执行下一次滚动
  setTimeout(doScroll, scrollInterval.value)
}
function init() {
  // 初始停一会，让用户能看清初始内容，再开始滚动
  setTimeout(() => {
    setTimeout(doScroll, scrollInterval.value)
  }, 5000)
}
</script>

<style scoped></style>
